﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditUserInfo.aspx.cs" Inherits="AiXiu.WebSite.EditUserInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>编辑个人资料</title>
    <link href="Content/mui/css/mui.picker.min.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.poppicker.css" rel="stylesheet" />
    <link href="Css/EditUserInfo.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <header class="mui-bar mui-bar-nav">
		    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    	<h1 class="mui-title">编辑个人资料</h1>
		    </header>
            <div class="content">
                <div class="mui-input-group">
                    <div class="mui-input-row">
						<label>昵称</label>
                        <asp:TextBox class="mui-input-clear" ID="txtNickName" placeholder="请输入昵称" runat="server"></asp:TextBox>
					</div>
                    <div class="mui-input-row">
						<label>性别</label>
                        <asp:DropDownList ID="ddlSex" runat="server" class="">
                            <asp:ListItem Selected="True" Value="0">未知</asp:ListItem>
                            <asp:ListItem Value="1">男</asp:ListItem>
                            <asp:ListItem Value="2">女</asp:ListItem>
                        </asp:DropDownList>
					</div>
                    <ul class="mui-input-row">
						<li><label>生日</label></li>
                        <li id="liBirthday" class="ui-alert" runat="server"></li>
					</ul>
                    <asp:HiddenField ID="hidBirthday" runat="server" />

                    <ul class="mui-input-row">
						<li><label>所在地</label></li>
                        <li id="liAddress" class="ui-alert" runat="server"></li>
					</ul>
                    <asp:HiddenField ID="hidAddress" runat="server" />

                    <div class="mui-input-row" id="HobbyRow">
						<label>爱好</label>
                        <asp:CheckBoxList ID="chklHobby" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
                            <asp:ListItem Text="篮球" Value="篮球"></asp:ListItem>
                            <asp:ListItem Text="跑步" Value="跑步"></asp:ListItem>
                            <asp:ListItem Text="看电影" Value="看电影"></asp:ListItem>
                            <asp:ListItem Text="钢琴" Value="钢琴"></asp:ListItem>
                            <asp:ListItem Text="网络游戏" Value="网络游戏"></asp:ListItem>
                            <asp:ListItem Text="逛街购物" Value="逛街购物"></asp:ListItem>
                         </asp:CheckBoxList>
					</div>
                </div>
            </div>

            <div class="foot">
                <asp:Button ID="btnEdit"  class="mui-btn mui-btn-block mui-btn-primary" runat="server" Text="立即更新" OnClick="btnEdit_Click" />
            </div>
        </div>
    </form>
    <script src="Content/mui/js/mui.min.js"></script>
    <script src="Content/mui/js/mui.picker.min.js"></script>
    <script src="Content/mui/js/mui.poppicker.js"></script>
    <script src="Content/mui/js/city.data.js"></script>
    <script src="Content/mui/js/city.data-3.js"></script>
    <script src="Content/jquery-3.6.0.min.js"></script>
    <script>
        (function ($) {
            $.init();
            /* 选择日期 */
            var result = $("#liBirthday")[0];
            result.addEventListener('tap', function () {

                var optionsJson = '{"type":"date","beginYear":1900,"endYear":2099}';

                var options = JSON.parse(optionsJson);

                var picker = new $.DtPicker(options);

                picker.show(function (rs) {
                    result.innerText = rs.text;
                    jQuery("#hidBirthday").val(rs.text);
                    picker.dispose();
                });
            }, false);

            /* 选择地区 */
            var cityPicker = new $.PopPicker({
                layer: 2
            });
            cityPicker.setData(cityData);
            var cityResult = $('#liAddress')[0];
            cityResult.addEventListener('tap', function (event) {
                cityPicker.show(function (items) {
                    cityResult.innerText = items[0].text + " " + items[1].text;
                    jQuery('#hidAddress').val(items[0].text + " " + items[1].text);
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        })(mui);
    </script>
    <script>

    </script>

</body>
</html>
